<template>
	<div class="system-dic-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" @close="clean">
			<el-form ref="credentialDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="授权用户">
							<el-select v-model="state.ruleForm.userIds" multiple class="filter-item" placeholder="请选择">
								<el-option v-for="item in state.userOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="授权角色">
							<el-select v-model="state.ruleForm.roleIds" multiple class="filter-item" placeholder="请选择">
								<el-option v-for="item in state.roleOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { reactive, ref } from 'vue';
import { resourceApi } from '/@/api/resource';
import { userApi } from '/@/api/user';
import { roleApi } from '/@/api/role';
import { ElMessage } from 'element-plus';

// 定义变量内容
const credentialDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		type: undefined, // type: 2, k8s集群类型
		resourceId: undefined,
		userIds: [], // 用户id
		roleIds: [], // 角色id
	},
	userOptions: [],
	roleOptions: [],
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type: int, row: Object) => {
	state.dialog.title = '资源授权';
	state.dialog.submitTxt = '确 定';
	state.dialog.isShowDialog = true;
	state.ruleForm.type = type;

	// 获取资源详情
	resourceApi()
		.getPrivilege({ resourceId: row.id, type: state.ruleForm.type })
		.then((res) => {
			state.ruleForm = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg);
		});

	// 获取用户列表
	userApi()
		.getUserOptions()
		.then((res) => {
			state.userOptions = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg);
		});

	// 获取角色列表
	roleApi()
		.getRoleOptions()
		.then((res) => {
			state.roleOptions = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg);
		});
};

// 清空表单
const clean = () => {
	state.ruleForm = {
		type: undefined, // type: 1, 密码类型
		resourceId: undefined,
		userIds: [], // 用户id
		roleIds: [], // 角色id
	};
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	credentialDialogFormRef.value.validate((valid: boolean) => {
		if (valid) {
			resourceApi()
				.bindPrivilege(state.ruleForm)
				.then(() => {
					closeDialog();
					ElMessage.success('保存成功');
				})
				.catch((err) => {
					ElMessage.error(err.msg);
				});
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
